<template>
    <div class="container">
      <div class="header">
        <div class="search_container" flex="cross:center">
          <div class="search_img" flex-box="0"></div>
          <input type="text" class="search_input" flex-box="1" placeholder="搜索">
        </div>
        <ul class="tag_list" flex="main:justify cross:center">
          <li class="tag_item tag_item_focus" flex-box="0" flex="main:center cross:center">今日新增(99999+)</li>
          <li class="tag_item" flex-box="0" flex="main:center cross:center">例子库(99999+)</li>
          <li class="tag_item" flex-box="0" flex="main:center cross:center">
            例子分析
            <div class="tag_more"></div>
          </li>
        </ul>
        <ul class="state_list" flex>
          <li class="state_item" flex-box="1" :class="{'state_item_focus':stateFocusIndex==stateIndex}"
              v-for="(stateItem,stateIndex) in stateList" @click="changeState(stateIndex)"
              v-text="stateItem.text" flex="main:center cross:center">
          </li>
        </ul>
      </div>
    </div>
</template>
<script type="text/babel" src="./example_pool.js"></script>
<style lang="scss" scoped src="./example_pool.scss"></style>
